/**
 * absolute + 负margin
 **/
.wp1 {
    position: relative;
}
.box1 {
    position: absolute;;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -50px;
}

/**
 * absolute + margin auto
 **/

.wp2 {
    position: relative;
}
.box2 {
    position: absolute;;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

/**
 * absolute + calc
 **/
 
 .wp3{
	 position: relative;
 }
 .box3{
	 position: absolute;
	 top:calc(50% - 50px);
	 left:calc(50% - 50px);
 }
 
 /**
  * absolute + transform
  **/
  
  .wp4 {
      position: relative;
  }
  .box4 {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
  }
  
  /**
   * lineheight
   **/
   
   .wp5 {
	   line-height: 300px;
	   text-align:center;
	   font-size:0px;
   }
   .box5{
	   font-size:16px;
	   display:inline-block;
	   vertical-align:middle;
	   line-height:initial;
	   text-align:left;
   }
   
   /**
    * writing-mode
	* writing-mode可以改变文字的显示方向，比如可以通过writing-mode让文字的显示变为垂直方向
    **/
	.wp6 {
		writing-mode: vertical-lr;
		text-align: center;
	}
	.wp-inner6 {
		writing-mode: horizontal-tb;
		display: inline-block;
		text-align: center;
		width: 100%;
	}
	.box6 {
		display: inline-block;
		margin: auto;
		text-align: left;
	}
	
	/**
	 * table
	 **/

	.wp7 {
	    text-align: center;
	}
	.box7 {
	    display: inline-block;
	}
	
	/**
	 * css-table
	 **/
	 
	 .wp8{
	     display: table-cell;
	     text-align: center;
	     vertical-align: middle;
	 }
	 .box8 {
	     display: inline-block;
	 }
  
  /**
   * flex
   **/
   .wp9 {
       display: flex;
       justify-content: center;
       align-items: center;
   }
   
   /**
    * grid  (flex)
    **/
  
	.wp {
		display: grid;
	}
	.box {
		align-self: center;
		justify-self: center;
	}